﻿<!doctype html>
<html lang="en">
<head>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxradiobutton.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title></title>
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <div class="container">
        <header class="header clearfix">
            <div class="logo">
                Tracker</div>
            <nav class="menu_main">
                <ul>
                    <li class="active"><a href="#">About</a></li>
                </ul>
            </nav>
        </header>
        <div class="info">
            <article class="hero clearfix">
                <div class="col_33">
                    <h2>
                       </h2>
                </div>
                <div class="col_33">
                    <script type="text/javascript">
                        $(document).ready(function () {
                            var theme = getTheme();
                            // Create jqxButton widgets.
                            $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'default' });

                            $("#jqxWidget").bind('buttonclick', function (event) {
                                var clickedButton = event.args.button;
                              //  $("#buttonEventsLog").html("Clicked: " + clickedButton[0].id);

                                var formatted_date = (function (d) {
                                    var f = d.format('dd.mm.yy h:MM')
                                })(new Date());

                                $("#buttonEventsLog").html(formatted_date);
                            });
                        });
                    </script>
                    <div id='jqxWidget'>
                        <input type="button" value="Call Recieved" style="font-size: 18px; margin: 10px 5%;
                            width: 120px; height: 80px" id="button" />
                        <input type="button" value="Dispatched" style="font-size: 18px; margin: 10px 5%;
                            width: 120px; height: 80px" id="button1" />
                        <input type="button" value="Enroute" style="font-size: 18px; margin: 10px 5%; width: 120px;
                            height: 80px" id="button2" />
                        <input type="button" value="On Scene" style="font-size: 18px; margin: 10px 5%; width: 120px;
                            height: 80px" id="button3" />
                        <input type="button" value="At Patient" style="font-size: 18px; margin: 10px 5%;
                            width: 120px; height: 80px" id="button4" />
                        <input type="button" value="Transporting" style="font-size: 18px; margin: 10px 5%;
                            width: 120px; height: 80px" id="button5" />
                        <input type="button" value="At Hospital" style="font-size: 18px; margin: 10px 5%;
                            width: 120px; height: 80px" id="button6" />
                        <input type="button" value="Available" style="font-size: 18px; margin: 10px 5%; width: 120px;
                            height: 80px" id="button7" />
                    </div>
                    <div id='Div1'>
                        <button style="padding: 4px 16px;" id="Left">
                            Left</button>
                        <button style="padding: 4px 16px;" id="Center">
                            Center</button>
                        <button style="padding: 4px 16px;" id="Right">
                            Right</button>
                    </div>
                    <div id="buttonEventsLog" style="margin-top: 10px;">
                    </div>                   
                </div>
                 <div class="col_33">
                        <h2>
                            </h2>
                    </div>
            </article>
        </div>
        <footer class="footer clearfix">
            <div class="copyright">
                jamminjimi</div>
            <nav class="menu_bottom">
                <ul>
                    <li class="active"><a href="#">About</a></li>
                </ul>
            </nav>
        </footer>
    </div>
</body>
</html>
